
const selects = document.querySelectorAll('.selects'); 
const sorts = document.querySelectorAll('.sorts'); 
const boxs = document.querySelector('.boxs');


let currentTopTab = 0; 
let currentBottomTab = 0; 

function change() {
    selects.forEach(item => item.classList.remove('active'));
    const targetIndex = Number(event.target.dataset.index);
    selects[targetIndex].classList.add('active');
    currentTopTab = targetIndex;
    currentBottomTab = 0;
    sorts.forEach(item => item.classList.remove('red'));
    sorts[0].classList.add('red');
    
    loadActivityData();
}

function tabs() {
    sorts.forEach(item => item.classList.remove('red'));
    const targetIndex = Number(event.target.dataset.index);
    sorts[targetIndex].classList.add('red');
    
    currentBottomTab = targetIndex;
    loadActivityData();
}

function loadActivityData() {
    boxs.innerHTML = '';
    
    const apiUrl = currentTopTab === 0 
        ? 'https://zuozhe.zongheng.com/api/book-activity/index?client_id=3&activity_type=1&dept=1' 
        : 'https://zuozhe.zongheng.com/api/book-activity/index?client_id=3&activity_type=2&dept=-1'; 
    
    if (currentBottomTab === 0) {
        fetch(apiUrl)
            .then(res => res.json())
            .then(res1 => {
                if (res1.data?.activity_list && res1.data.activity_list.length > 0) {
                    res1.data.activity_list.forEach(item => {
                        boxs.innerHTML += `
                            <div class="box">
                                <img src="${item.image_link}" alt="${item.title}">
                                <div class="title">${item.title}</div>
                                <p>纵横中文网</p>
                                <p>活动时间：${item.start_time} - ${item.end_time}</p>
                            </div>
                        `;
                    });
                } else {
                    boxs.innerHTML = '<div class="no-data">暂无相关活动数据</div>';
                }
            })
            .catch(err => {
                console.error('数据请求失败：', err);
                boxs.innerHTML = '<div class="no-data">数据加载失败，请重试</div>';
            });
    } else if (currentBottomTab === 1) {
        boxs.innerHTML += `
            <div class="box">
                <img src="https://cdn.qimao.com/bookimg/zww/backendstatic/images/other/17473827679639090.jpg" alt="">
                <div class="title">中国情怀：时代记录与家国镜相 ——第六届七猫百万奖金现实题材征文大赛暨澎湃·镜相第三届非虚构写作大赛</div>
                <p>纵横中文网</p>
                <p>活动时间：2025-5-16 - 2025-6-11</p>
            </div>
            <div class="box">
                <img src="https://cdn.qimao.com/bookimg/zww/backendstatic/images/other/17376058503927030.jpg" alt="">
                <div class="title">纵横中文网2025年度征文—— 【万象集萃：年度史诗盛宴】</div>
                <p>纵横中文网</p>
                <p>活动时间：2025-02-01 - 2026-01-31</p>
            </div>
        `;
    } else if (currentBottomTab === 2) {
        fetch(apiUrl)
            .then(res => res.json())
            .then(res1 => {
                if (res1.data?.activity_list && res1.data.activity_list.length > 0) {
                    res1.data.activity_list.forEach(item => {
                        boxs.innerHTML += `
                            <div class="box">
                                <img src="${item.image_link}" alt="${item.title}">
                                <div class="title">${item.title}</div>
                                <p>纵横中文网</p>
                                <p>活动时间：${item.start_time} - ${item.end_time}</p>
                            </div>
                        `;
                    });
                } else {
                    boxs.innerHTML = '<div class="no-data">暂无相关活动数据</div>';
                }
            })
            .catch(err => {
                console.error('数据请求失败：', err);
                boxs.innerHTML = '<div class="no-data">数据加载失败，请重试</div>';
            });
    }
}
loadActivityData();